<template>
    <a-card>
      <el-table :data="tableData" height="73vh" ref="table">
        <el-table-column type="selection" width="40" />
        <!-- <el-table-column type="index" :index="indexMethod" /> -->
        <el-table-column label="井深(m)" prop=Depth />
        <el-table-column label="井斜角(°)" prop=Incln />
        <el-table-column label="方位角(°)" prop=Azimuth />
        <el-table-column fixed="right" label="操作" width="80">
          <template #default>
            <el-button style="color: red;" type="text" size="small">删除</el-button> </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="true" :total="holeList.length" layout="total, prev, pager, next,sizes" :pager-count="3"
        v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" @current-change="getList"
        @size-change="handlesizechange" />
      <div style="margin-top: 10px; display:  flex; justify-content: center; align-items: center;">
        <el-button class="mt-4" type="success" style="width: 120px">添加</el-button>
        <el-upload :action="'javascript:void(0)'" :before-upload="() => false" @change="uploadExcel"
          style="margin-top: 10px ; margin-left: 10px;">
          <el-button style="width: 120px" type="primary">导入</el-button>
        </el-upload>
      </div>
    </a-card>
  </template>
  
  <script setup>

  import {holeData as holeList} from '../../../mock/index'
  import { read, utils } from 'xlsx'
  const tableData = ref()
  const queryParams = ref({
    pageSize: 20,
    pageNum: 1
  })
  const uploadExcel = (files) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];
      const json = utils.sheet_to_json(worksheet, { header: 1 });
      // console.log(json); // 输出 json 数组，查看是否正确获取到了表格数据
      // 对 Excel 表格中的数据进行格式转换
      const tableRows = json.slice(1).map(item => ({
        Depth: item[0] === undefined ? '' : item[0],
        Incln: item[4] === undefined ? '' : item[4],
        Azimuth: item[5] === undefined ? '' : item[5],
        ToolFaceAngle: item[6] === undefined ? '' : item[6],
        InclnRate: item[7] === undefined ? '' : item[7],
        AzimuthRate: item[8] === undefined ? '' : item[8],
        DLS: item[9] === undefined ? '' : item[9],
      }))
      saveJSON(tableRows, "hole")
      tableData.value = tableRows;
    }
  
    reader.readAsArrayBuffer(files.raw);
  };
  
  const handleScroll = () => {
    const tableRef = $refs.table.$el;
    const scrollDistance = tableRef.scrollHeight - tableRef.clientHeight - tableRef.scrollTop;
  
    if (scrollDistance <= 10) {
      // Perform your scroll loading logic here
      // 加载更多数据的逻辑代码放在这里
    }
  };
  
  const drawXAxisData = ref({
    start: undefined,
    end: undefined,
    step: undefined,
  });
  
  function saveJSON(data, filename) {
    if (!data) {
      alert("保存的数据为空");
      return;
    }
    if (!filename) filename = "json.json";
    if (typeof data === "object") {
      data = JSON.stringify(data, undefined, 4);
    }
  
    var blob = new Blob([data], { type: "text/json" }),
      e = document.createEvent("MouseEvents"),
      a = document.createElement("a");
    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
    e.initMouseEvent(
      "click",
      true,
      false,
      window,
      0,
      0,
      0,
      0,
      0,
      false,
      false,
      false,
      false,
      0,
      null
    );
    a.dispatchEvent(e);
  }
  getList()
  function handlesizechange(e) {
    queryParams.pageSize = e
    getList()
  }
  function getList() {
    tableData.value = holeList.slice((queryParams.value.pageNum - 1) * queryParams.value.pageSize, queryParams.value.pageSize * queryParams.value.pageNum)
    console.log(queryParams.value.pageNum)
  }
  
  </script>
  
  <style scoped></style>
  